<template>
  <el-card class="box-card">
    <div class="infobox">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1" title="new">
          <template slot="title">
            <i class="el-icon-s-order" style="font-size: 20px"></i>
            <h3 style="margin-left: 20px">new</h3>
            <el-badge :hidden="tableData.length == 0" type="warning" :value="tableData.length" />
          </template>
          <el-table :cell-style="{ height: '50px', border: 'none' }" :data="tableData" :row-style="{ height: '50px' }" :show-header="false">
            <el-table-column align="center" prop="text" width="180">
              <template slot-scope="scope">
                {{ scope.row.text }}
                <el-badge :hidden="scope.row.num == 0" style="margin-top: 5px" type="primary" :value="scope.row.num" />
              </template>
            </el-table-column>
            <el-table-column align="left">
              <i class="el-icon-arrow-right"></i>
            </el-table-column>
          </el-table>
        </el-collapse-item>

        <el-collapse-item name="2" title="new">
          <template slot="title">
            <i class="el-icon-sell" style="font-size: 20px"></i>
            <h3 style="margin-left: 20px">new</h3>
            <el-badge :hidden="tableData.length == 0" type="warning" :value="tableData.length" />
          </template>
          <el-table :cell-style="{ height: '50px', border: 'none' }" :data="tableData" :row-style="{ height: '50px' }" :show-header="false">
            <el-table-column align="center" prop="text" width="180">
              <template slot-scope="scope">
                {{ scope.row.text }}
                <el-badge :hidden="scope.row.num == 0" style="margin-top: 5px" type="primary" :value="scope.row.num" />
              </template>
            </el-table-column>
            <el-table-column align="left">
              <i class="el-icon-arrow-right"></i>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="3" title="new">
          <template slot="title">
            <i class="el-icon-chat-line-round" style="font-size: 20px"></i>
            <h3 style="margin-left: 20px">new</h3>
            <el-badge :hidden="tableData.length == 0" type="warning" :value="tableData.length" />
          </template>
          <el-table :cell-style="{ height: '50px', border: 'none' }" :data="tableData" :row-style="{ height: '50px' }" :show-header="false">
            <el-table-column align="center" prop="text" width="180">
              <template slot-scope="scope">
                {{ scope.row.text }}
                <el-badge :hidden="scope.row.num == 0" style="margin-top: 5px" type="primary" :value="scope.row.num" />
              </template>
            </el-table-column>
            <el-table-column align="left">
              <i class="el-icon-arrow-right"></i>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: 'VabInfo',
    props: {
      infoData: {
        type: Boolean,
        default: true,
        required: true,
      },
    },
    data() {
      return {
        baseinfoData: this.infoData,
        activeName: '1',
        tableData: [
          // {
          //   text: '待审核订单',
          //   num: 5,
          // },
          // {
          //   text: '待发货订单',
          //   num: 1,
          // },
          // {
          //   text: '已逾期订单',
          //   num: 0,
          // },
          // {
          //   text: '近期到期订单',
          //   num: 3,
          // },
        ],
      }
    },
    computed: {},
    watch: {},
    created() {
      console.log(this.baseinfoData)
    },
    mounted() {},
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .box-card {
    width: 15vw;
    box-sizing: border-box;
    background-color: #fff;

    ::v-deep .el-collapse {
      right: 0;
      width: 300px;
    }
  }
</style>
